<template>
  <div >
    <p class="tips">说明: 此工具是默认为阿里的那种配置保存方式来获取数据的,像 nacos , diamond ,
      你只需要指定数据库连接和 schema , 我将为你获取对应 group 和 dataId , 并获取配置数据 </p>
    <el-button type="primary" :disabled="!connName" size="small" @click="loadGroups">检测数据</el-button>
    <el-row class="margin-top">
      <el-col :span="6">
        <list-group :list="groups" @click-item="choseGroup" />
      </el-col>
      <el-col :span="6">
        <list-group :list="dataIds" @click-item="choseDataId" />
      </el-col>
      <el-col :span="10" class="margin-left">
        <el-input
          v-model="content"
          type="textarea"
          :autosize="{ minRows: 10, maxRows: 20}"
          placeholder="配置信息"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import database from '../../../api/database'
import ListGroup from '../../../components/ListGroup'

export default {
  name: 'ConfigData',
  props: {
    connName: String,
    namespace: Object
  },
  components: { ListGroup },
  data() {
    return {
      input: {
        group: null,
        dataId: null,
      },
      view: {
        loading: false
      },
      groups: [],
      dataIds: [],
      content: null
    }
  },
  methods: {
    loadGroups() {
      database.groups(this.connName, this.namespace).then(res => {
        this.groups = res.data
        if (this.groups && this.groups.length > 0) {
          this.choseGroup({ value: this.groups[0] })
        }
      })
    },
    choseGroup(value) {
      this.input.group = value
      database.dataIds(this.connName, this.namespace, value).then(res => {
        this.dataIds = res.data
        if (this.dataIds && this.dataIds.length > 0) {
          this.choseDataId(this.dataIds[0])
        }
      })
    },
    choseDataId(value) {
      this.input.dataId = value
      database.content(this.connName, this.namespace, this.input.group, value).then(res => {
        this.content = res.data
      })
    }
  }
}
</script>

<style scoped>
  .tips{
    line-height: 1.5;
  }
</style>
